<template>
	<div>
		<el-row :gutter="20" class="line-height-2em">
			<el-col :span="2" :offset="1">
				<el-checkbox v-model="checked">多选</el-checkbox>
			</el-col>
			<el-col :span="13" :offset="0">
				<el-button type="primary" size="mini" class="margin-left-20"
					>删除</el-button
				>
				<el-button type="primary" size="mini">加入试卷</el-button>
			</el-col>
			<el-col :span="6" :offset="2">
				<span>排序: </span>
				<el-select
					placeholder="序号正序"
					clearable
					filterable
					size="mini"
					:value="1"
				>
					<el-option label="正序" :value="order.asc"> </el-option>
					<el-option label="反序" :value="order.desc"> </el-option>
				</el-select>
			</el-col>
		</el-row>

		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			class="margin-top-15"
		>
			<el-table-column type="selection" width="55"> </el-table-column>

			<el-table-column
				label="编号"
				type="index"
				width="50"
				:index="indexMethod"
			>
			</el-table-column>

			<el-table-column label="题干" width="120">
				<template slot-scope="scope">{{ scope.row.filltopic }}</template>
			</el-table-column>
			<el-table-column label="题型" width="120">
				<template slot-scope="scope">
					{{ scope.row.typenum | getTypeNum }}
				</template>
			</el-table-column>
			<el-table-column prop="createtime" label="创建时间"> </el-table-column>

			<el-table-column label="操作">
				<el-button type="success" size="mini">查看</el-button>
				<span> | </span>
				<el-button type="primary" size="mini">修改</el-button>
			</el-table-column>
			<el-table-column label="删除文件">
				<el-button type="danger" size="mini">删除</el-button>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next,sizes"
			:total="total"
			:page-sizes="pageSizes"
			:page-size="10"
			class="pagination"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			order: {
				desc: "desc",
				asc: "asc",
			},
			checked: true,
			tableData: [],
			multipleSelection: [],
			pageSizes: [10, 20, 30],
			pageNum: 1,
			pageSize: 10,
			total: 0,
		};
	},
	// 过滤器
	filters: {
		getTypeNum(val) {
			if (val === 1) {
				return "填空题";
			} else if (val === 2) {
				return "选择题";
			} else {
				return "简答题";
			}
		},
	},
	created() {
		// 调用方法 获取试题列表
		this.getQuestionList(this.pageNum, this.pageSize);
	},
	methods: {
		// 页码的变化
		handleCurrentChange(val) {
			// val 就是点击的页面
			// 获取试题列表
			this.getQuestionList(val);
		},
		/**
		 * @description 获取试题列表
		 * @param {number} pageNum 页码
		 * @param {number} pageSize 每页数量
		 */
		getQuestionList(pageNum = 1, pageSize = 10) {
			this.pageNum = pageNum; // 页码
			this.pageSize = pageSize; // 每页条数
			this.$axios
				.get(
					`/system/sqTestpaperstable/selectAlltopic?pageNum=${pageNum}&pageSize=${pageSize}`
				)
				.then((res) => {
					// 获取数据成功
					if (res.data.code === 1) {
						// 成功获取数据
						this.total = res.data.data.total;
						this.tableData = res.data.data.pageInfo;
					}
				})
				.catch((err) => {
					// 获取数据失败
					console.log(err);
				});
		},
		indexMethod(index) {
			// 0*10 + index   1   pageNum-1 pageSize
			// 1*10 + index   2		pageNum-1
			// 2*10 + index   3
			return (this.pageNum - 1) * this.pageSize + (index + 1);
		},
	},
};
</script>

<style scoped>
.margin-left-20 {
	margin-left: 20px;
}
.margin-left-15 {
	margin-top: 15px;
}
.line-height-2em {
	line-height: 2em;
}
.pagination {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 50px;
}
</style>